<template>
	<div class="mainContent offerconver-container">
		<!-- 报价换算 -->
		<div class="bread-nav">
			<span class="bread-item">供应商管理</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">供应商基本信息</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">报价换算</span>
		</div>
		<!--  -->
		<div class="offerconver-contant">
			<div class="search-box">
				<!--  -->
				<advancedSearch :option="Model.filterOption" @getChild="showChild" @onSearch="toSearch" @onClear="toClear"
				 @onExport="toExport"></advancedSearch>
			</div>
			<!-- 表格 -->
			<div class="offerconver-table">
				<!--  -->
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">供应商换算</div>
						<div class="common-btn-group">
							<div class="common-table-btn-item table-btn-new" @click="showdialog">
								<img src="@/assets/img/button_search.png" alt="">
								<p>新建</p>
							</div>
						</div>
					</div>
				</el-row>
				<!--  -->
				<el-row class="common-table-con">
					<el-table stripe :data="Model.tableData" :row-style="selectedHighlight" @selection-change="handleSelectionChange">
						<el-table-column align="center" v-for="(item,index) in Model.tableHeaderData" :key="index" :prop="item.prop"
						 :label="item.label" :width="item.width">
						</el-table-column>
					</el-table>
					<!-- 分页 -->
					<el-row class="pagination-cont">
						<el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page="Model.paginationObject.currentPage"
						 :page-sizes="[10, 20, 30, 40]" :pager-count="5" :page-size="Model.paginationObject.pageSize" layout="sizes, prev, pager, next, jumper, slot"
						 :total="Model.paginationObject.total">
							<div class="pagination-slot">
								显示
								<p class="slot-i">{{Model.paginationObject.num1}}</p>
								到
								<p class="slot-i">{{Model.paginationObject.num2}}</p>
								，共
								<p class="slot-i">{{Model.paginationObject.total}}</p>
								记录
							</div>
						</el-pagination>
					</el-row>
				</el-row>

			</div>
			<!-- 弹窗1 -->
			<el-dialog :visible.sync="Model.dialogTableNew" top="100px" class="offerconver-dialog-new">
				<!--  -->
				<div class="common-table-title">
					<div class="common-table-icon"></div>
					<div class="common-table-fl">新增换算</div>
				</div>
				<!--  -->
				<el-form ref="form" :inline="true" :model="Model.popForm" class="dialog-search-form">
					<el-row>
						<el-form-item label="24k金价：">
							<el-input type="number" min="0" v-model="Model.popForm.goldPrice"></el-input>
						</el-form-item>
					</el-row>

					<el-row v-for="(item,index) in Model.popForm.addListData" :key="index">
						<el-form-item :label="item.label+': 比例：'">
							<el-input type="number" min="0" v-model="item.proportion"></el-input>
						</el-form-item>
						<el-form-item label="金价">
							<el-input :disabled="true" :value="(Model.popForm.goldPrice*item.proportion)"></el-input>
						</el-form-item>
					</el-row>
				</el-form>
				<el-row class="dialog-btn-group">
					<div class="dialog-btn dialog-btn-confirm" @click="offerInfoAddSave()">保存</div>
				</el-row>
			</el-dialog>
			<!-- 弹窗2 -->
			<!-- <el-dialog :visible.sync="dialogTips" top="100px" class="operate-tips-dialog">
        
        <div class="common-table-title">
          <div class="common-table-icon"></div>
          <div class="common-table-fl">提示</div>
        </div>
        
        <p v-if="operateTipsStatus == 'success' " class="operate-success">操作成功！</p>
        <p v-else-if="operateTipsStatus == 'failure' " class="operate-failure">操作失败！</p>
        <p v-else>错误！</p>
        
        <el-row class="dialog-btn-group">
          <div class="dialog-btn dialog-btn-confirm" @click="dialogTips = false">确定</div>
        </el-row>
      </el-dialog> -->
		</div>
	</div>
</template>

<script>
	import pathTracking from '@/components/common/pathTracking'
	import card from '@/components/common/filterBtns'
	import advancedSearch from "@/components/common/filter/advancedSearch";

	import {
		getDateString
	} from "@/assets/js/common.js"
	import Model from './model.js'
	import Controller from './controller.js'
	export default {
		name: "spotOrder",
		mixins: [Model, Controller],
		components: {
			pathTracking,
			card,
			advancedSearch
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
